<template>
    <div class="login2">
        <div class="wrap w">
            <div class="leftbox">
                <Item :data="data" />
                <Nav :scroll="scrollTo" />
            </div>
            <div class="rightbox">
                <IpoHeader />
                <IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
                <div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
                    <IpoContent
                        ref="i0"
                        :info="information11"
                        :title="$t('ipo.CompanyInformation')"
                    />
                    <IpoContent
                        ref="i1"
                        :info="TypeOfListing11"
                        :title="$t('ipo.TypeofListing.TypeofListing')"
                    />
                    <IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
                    <IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
                    <IpoContent
                        ref="i4"
                        :info="Timetable11"
                        :title="$t('ipo.Timetable.Timetable')"
                    />
                    <IpoContent
                        ref="i5"
                        :info="Documents11"
                        :title="$t('ipo.Documents.Documents')"
                    />
                    <IpoContent
                        ref="i6"
                        :info="Transaction11"
                        :title="$t('ipo.TransactionCosts.TransactionCosts')"
                    />
                </div>
                <div
                    v-else
                    style="
                        display: flex;
                        align-items: center;
                        width: 100vw;
                        height: 90vh;
                        justify-content: center;
                    "
                >
                    <div style="color: #1f4055; font-weight: bold; font-size: 25px">
                        {{ $t(i18n.global.t('home.nodata')) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'XIPO',
};
</script>
<script setup lang="ts">
import Item from '@/views/dashBoard/Main.vue';
import Nav from '@/views/dashBoard/nav/index.vue';
import IpoHeader from './components/IpoHeader.vue';
import IpoNav from './components/IpoNav.vue';
import IpoContent from './components/IpoContent.vue';
import { ref, onMounted, onUpdated, computed } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { ipoStore } from '@/stores/ipo';
import { useRoute } from 'vue-router';
import { getIpo, getOfferings, getTypeofListing } from '@/api/reqIpo/ipo';
import { getDataFromId } from '@/api/mock/home';
import i18n from '@/locales';
import { getCurrentInstance } from 'vue';
import moment from 'moment';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { resolve } from 'path-browserify';
const MockRes = ref<any>('');
const information11 = computed(() => {
    const {
        companyEngFull,
        companyEngShort,
        companyChiFull,
        companyChiShort,
        stkCode,
        isin,
        hkAddress,
        placeOfCorp,
    } = MockRes.value;
    console.log(' MockRes.value', MockRes.value);

    const placeOfincorporation = ref('');
    var obj = {
        1: proxy.$t('ipo.Bermuda'),
        2: proxy.$t('ipo.CaymanIslands'),
        3: proxy.$t('ipo.HongKongChina'),
        4: proxy.$t('ipo.PeoplesRepublicofChina'),
        5: proxy.$t('ipo.Australia'),
        6: proxy.$t('ipo.BritishVirginIslands'),
        7: proxy.$t('ipo.CanadaAlberta'),
        8: proxy.$t('ipo.CanadaBritishColumbia'),
        9: proxy.$t('ipo.CanadaOntario'),
        10: proxy.$t('ipo.England'),
        11: proxy.$t('ipo.Israel'),
        12: proxy.$t('ipo.Italy'),
        13: proxy.$t('ipo.Japan'),
        14: proxy.$t('ipo.Jersey'),
        15: proxy.$t('ipo.Luxembourg'),
        16: proxy.$t('ipo.Singapore'),
        17: proxy.$t('ipo.USDelaware'),
        99: proxy.$t('ipo.Others'),
    };
    if (isValidKey(placeOfCorp, obj)) {
        placeOfincorporation.value = obj[placeOfCorp];
    }
    function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
        return key in object;
    }

    const arr = [
        has_data(companyEngFull),
        has_data(companyEngShort),
        has_data1(companyChiFull),
        has_data2(companyChiShort),
        has_data(stkCode),
        has_data(isin),
        placeOfincorporation.value,
        hkAddress,
    ];
    console.log('arr', arr);
    let infos = [''];
    if (arr[7]) {
        arr[7].__proto__ = Array.prototype;
        infos = arr[7].map((obj: any) => {
            return obj.line;
        });
    }

    console.log('ARR', arr[7]);
    console.log(companyChiFull);

    return [
        {
            name: proxy.$t('ipo.CompanyNameEnglishFull'),
            info: arr[0],
        },
        {
            name: proxy.$t('ipo.CompanyNameEnglishShort'),
            info: arr[1],
        },
        {
            name: proxy.$t('ipo.CompanyNameChineseFull'),
            info: arr[2],
        },
        {
            name: proxy.$t('ipo.CompanyNameChineseShort'),
            info: arr[3],
        },
        {
            name: proxy.$t('ipo.STockCode'),
            info: arr[4],
        },
        {
            name: proxy.$t('ipo.ISIN'),
            info: arr[5],
        },
        {
            name: proxy.$t('ipo.PlaceofIncorporation'),
            info: arr[6],
        },
        {
            name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
            infos: infos,
        },
    ];
});
const TypeOfListing11 = computed(() => {
    let { offerType, listSecurities, nomValue, nomCur, listPlatform } = MockRes.value;
    var obj3 = {
        1: 'HKD',
        2: 'CNY',
        3: 'USD',
        4: 'AED',
        5: 'ATS',
        6: 'AUD',
        7: 'BDT',
        8: 'BEC',
        9: 'BEL',
        10: 'BHD',
        11: 'BND',
        12: 'BRC',
        13: 'BRL',
        14: 'BUK',
        15: 'CAD',
        16: 'CHF',
        17: 'CYP',
        18: 'DEM',
        19: 'DKK',
        20: 'ECU',
        21: 'ESP',
        22: 'EUR',
        23: 'FIM',
        24: 'FJD',
        25: 'FRF',
        26: 'GBP',
        27: 'GGP',
        28: 'IDR',
        29: 'IEP',
        30: 'IMP',
        31: 'INR',
        32: 'ITL',
        33: 'JPY',
        34: 'KES',
        35: 'KRW',
        36: 'KWD',
        37: 'LBP',
        38: 'LKR',
        39: 'MOP',
        40: 'MUR',
        41: 'MYR',
        42: 'NGN',
        43: 'NIS',
        44: 'NLG',
        45: 'NOK',
        46: 'NZD',
        47: 'OMR',
        48: 'PHP',
        49: 'PKR',
        50: 'PTE',
        51: 'QAR',
        52: 'RUB',
        53: 'SAR',
        54: 'SCR',
        99: 'Others',
    };
    var obj2 = {
        1: proxy.$t('home.Mainboard'),
        2: proxy.$t('home.GEM'),
    };
    var obj1 = {
        1: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
        2: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
        3: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
        4: proxy.$t('ipo.TypeofListing.Preferenceshares'),
        5: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
        6: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
        7: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
        8: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
        99: proxy.$t('ipo.TypeofListing.Other'),
    };
    var obj = {
        1: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
        2: proxy.$t('ipo.TypeofListing.Byplacingonly'),
        3: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
        4: proxy.$t('ipo.TypeofListing.Byintroduction'),
        5: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
    };

    if (isValidKey(offerType, obj)) {
        offerType = obj[offerType];
    }
    if (isValidKey(listSecurities, obj1)) {
        listSecurities = obj1[listSecurities];
    }
    if (isValidKey(listPlatform, obj2)) {
        listPlatform = obj2[listPlatform];
    }
    if (isValidKey(nomCur, obj3)) {
        nomCur = obj3[nomCur];
    }
    function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
        return key in object;
    }
    const arr = [
        { info: offerType },
        { info: listSecurities },
        { info: has_data(nomValue), info2: nomCur as any },
        { info: listPlatform },
        { info: has_data(listSecurities) },
    ];
    return [
        {
            name: proxy.$t('ipo.TypeofListing.OfferingType'),
            info: arr[0].info,
        },
        {
            name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
            info: arr[1].info,
        },
        {
            name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
            info: arr[2].info,
            name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
            info2: arr[2].info2,
        },
        {
            name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
            info: arr[3].info,
        },
    ];
});
const Offerings11 = computed(() => {
    const {
        tradeCurrency,
        downwardPriceFlex,
        priceMin,
        priceMax,
        priceFinal,
        boardLot,
        poReallocationCap,
        ioOfferSharesFinal,
        ipoShares,
        overallPoShares,
        overallIoShares,
        poSharesFinal,
        clawback,
        overallotOption,
        denomTable,
        upsizeOption,
    } = MockRes.value;

    const clawback1 = clawback ? Array.from(JSON.parse(JSON.stringify(clawback))) : [];
    console.log('clawback1', clawback1);
    var dataObj = [
        { info: has_data(tradeCurrency) },
        { info: keepTwoDecimalStr1(downwardPriceFlex) },
        {
            info: has_data(priceMin?.toFixed(3)) + '-' + has_data(priceMax?.toFixed(3)),
            info2: has_data(priceFinal?.toFixed(3)),
        },
        { info: has_data(boardLot) },
        { info: keepTwoDecimalStr(poReallocationCap) },
        {
            info2s: has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')),
            table: clawback1,
        },

        {
            info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')),
            info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')),
        },
        { info: has_data(upsizeOption?.toFixed(2), '%') },
        { table: denomTable },
    ];

    const arr = Offerings.value.map((item, index) => {
        const name = item.name;
        console.log('dataobj', dataObj[index]);

        const info = dataObj[index].info;
        var filterObj = { name, info } as any;
        if (dataObj[index].info2) {
            filterObj.info2 = dataObj[index].info2;
            filterObj.name2 = item.name2;
        }
        if (dataObj[index]?.info2s) {
            filterObj.info2s = dataObj[index].info2s;
        }
        if (dataObj[index].table) {
            filterObj.table = { title: item.table?.title, lists: [] };
            filterObj.table.lists = filterObj.table
                ? dataObj[index].table.map((element: any) => {
                      console.log('element', element);

                      if (index == 8) {
                          //加逗号的函数
                          function formatNumber(num: number | string) {
                              return num.toString().replace(/\d+/, function (n: string) {
                                  return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                              });
                          }
                          const { shares: number, value: persent } = element;
                          // console.log('ttttttttttttttttttt',persent);
                          let per = Number(persent);
                          return {
                              number: formatNumber(number),
                              persent: per && formatNumber(per.toFixed(2)),
                          };
                      } else {
                          function formatNumber(num: number | string) {
                              return num.toString().replace(/\d+/, function (n: string) {
                                  return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                              });
                          }

                          const { ratio: number, allocation: persent } = element;
                          console.log('percent', persent);

                          return {
                              number: formatNumber(number),
                              persent: keepTwoDecimalStr(persent),
                          };
                      }
                  })
                : [];
        }
        return filterObj;
    });
    console.log('arr', arr);
    return [
        {
            name: proxy.$t('ipo.Offering.TradingCurrency'),
            info: arr[0].info,
        },
        {
            name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
            info: arr[1].info,
        },
        {
            name: proxy.$t('ipo.Offering.OfferPriceRange'),
            info: arr[2].info,
            name2: proxy.$t('home.finalofferprice'),
            info2: arr[2].info2,
        },
        {
            name: proxy.$t('ipo.Offering.TradingBoardLot'),
            info: arr[3].info,
        },
        {
            name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
            info: arr[4].info,
        },
        {
            name: proxy.$t('ipo.Offering.NumberofOfferShares'),
            info: arr[5].info2s,
            table: {
                title: [
                    {
                        header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'),
                        content: 'number',
                        width: isMobel() ? 33 : 50,
                        align: 'right',
                    },
                    {
                        header: proxy.$t('ipo.Offering.PublicOfferAllocation'),
                        content: 'persent',
                        width: isMobel() ? 38 : 50,
                        align: 'right',
                    },
                ],
                lists: arr[5].table ? arr[5].table.lists : [],
            },
        },
        {
            name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
            info: arr[6].info,
            name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
            info2: arr[6].info2,
        },
        {
            name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
            info: arr[7].info,
        },
        {
            name: proxy.$t('ipo.Offering.DenominationTable'),
            table: {
                title: [
                    {
                        header: proxy.$t('ipo.Offering.ApplicationQuantity'),
                        content: 'number',
                        width: isMobel() ? 35 : 50,
                        align: 'right',
                    },
                    {
                        header: proxy.$t('ipo.Offering.MaximumPayableonApplication'),
                        content: 'persent',
                        width: 50,
                        align: 'right',
                    },
                ],
                lists: arr[8].table ? arr[8].table.lists : [],
            },
        },
    ];
});
const Advisers11 = computed(() => {
    let {
        designatedSponsor,
        sponsors,
        legalSponsor,
        legalIssuer,
        underwriters,
        advisers,
        overallCoordinators,
        distributors,
        hkSharereg,
    } = MockRes.value;
    const arr = [
        { info: has_data(designatedSponsor) },
        { infos: filter(sponsors) },
        { infos: filter(legalSponsor) },
        { info: has_data(legalIssuer) },
        { infos: filter(underwriters) },
        { infos: filter(advisers) },
        { infos: filter(overallCoordinators) },
        { infos: filter(distributors) },
        { info: has_data(hkSharereg) },
    ];
    function filter(arr: any) {
        if (arr) {
            return arr.map((item: any) => item.member);
        } else {
            return '-';
        }
    }

    const arrData = Advisers.value.map((item: any, index: number) => {
        if (arr[index].info) {
            return { ...item, info: arr[index].info };
        } else {
            if (arr[index].infos?.length - 1 > 0) {
                let info2Top = -(arr[index].infos?.length * 22) + 'px';
                return { ...item, infos: arr[index].infos, info2Top };
            } else {
                return { ...item, infos: arr[index].infos };
            }
        }
    });

    return [
        {
            name: proxy.$t('ipo.advisers.DesignatedSponsor'),
            info: arrData[0].info,
        },
        {
            name: proxy.$t('ipo.advisers.Sponsor'),
            info: arrData[1].info,
            infos: arrData[1].infos,
        },
        {
            name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
            infos: arrData[2].infos,
            info2Top: arrData[2].info2Top,
        },
        {
            name: proxy.$t('ipo.advisers.HKLegalAdviser'),
            info: arrData[3].info,
            // info2: "LEG_TEAM05"
        },
        {
            name: proxy.$t('ipo.advisers.Underwriter'),
            info: arrData[4].info,
            infos: arrData[4].infos,
        },
        {
            name: proxy.$t('ipo.advisers.Adviser'),
            info: arrData[5].info,
            infos: arrData[5].infos,
        },
        {
            name: proxy.$t('ipo.advisers.OverallCoordinator'),
            infos: arrData[6].infos,
            info2Top: arrData[6].info2Top,
        },
        {
            name: proxy.$t('ipo.advisers.Distributor'),
            infos: arrData[7].infos,
            info2Top: arrData[7].info2Top,
        },
        {
            name: proxy.$t('ipo.advisers.HKShareRegistrar'),
            info: arrData[8].info,
        },
    ];
});
const Timetable11 = computed(() => {
    const {
        listingDate,
        bookOpenDate,
        bookCloseDate,
        pricingDate,
        allotmentDate,
        siInputDate,
        placingSharesDeliveryDate,
    } = MockRes.value;

    const arr = [
        {
            info: timeTo(listingDate)[0],
            info2: timeTo(listingDate)[1],
            table: {
                lists: [
                    {
                        number: timeTo(bookOpenDate)[0],
                        persent: timeTo(bookOpenDate)[1],
                    },
                    {
                        number: timeTo(bookCloseDate)[0],
                        persent: timeTo(bookCloseDate)[1],
                    },
                    {
                        number: timeTo(pricingDate)[0],
                        persent: timeTo(pricingDate)[1],
                    },
                    {
                        number: timeTo(allotmentDate)[0],
                        persent: timeTo(allotmentDate)[1],
                    },
                    {
                        number: timeTo(siInputDate)[0],
                        persent: timeTo(siInputDate)[1],
                    },
                    {
                        number: timeTo(placingSharesDeliveryDate)[0],
                        persent: timeTo(placingSharesDeliveryDate)[1],
                    },
                ],
            },
        },
    ];
    const arrData = Timetable.value.map(item => {
        const isMobel = 768 >= document.documentElement.clientWidth;
        item.table.lists = item.table.lists.map((item, index) => {
            const { number, persent } = arr[0].table.lists[index];
            return { ...item, number, persent };
        });
        if (isMobel) {
            item.table.title = item.table.title.filter((element: any) => element.header);
            item.table.title = item.table.title.map((element: any, index: number) => {
                if (index == 0) {
                    element.width = 55;
                }
                return element;
            });
        }
        return { ...item, info: arr[0].info, info2: arr[0].info2 };
    });
    function timeTo(time: string | null | undefined) {
        if (time) {
            return [moment(time).format('YYYY-MM-DD'), toEmpty(moment(time).format('HH:mm'))];
        } else {
            return ['-', '-'];
        }
        function toEmpty(time: string) {
            //如果时间戳转换出来是00:00 就返回空
            if (time == '00:00') {
                return '';
            } else {
                return time;
            }
        }
    }
    const lists = arrData[0].table.lists;
    return [
        {
            name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
            info: arrData[0].info,
            name2: proxy.$t('ipo.Timetable.Time'),
            info2: arrData[0].info2,
            table: {
                title: [
                    { header: ' ', content: 'des', width: isMobel() ? 50 : 43, align: 'left' },
                    { width: isMobel() ? 1 : 12 }, //通过加一段空结构来调整表头的位置
                    {
                        header: proxy.$t('ipo.Timetable.Date'),
                        content: 'number',
                        width: isMobel() ? 30 : 20,
                        align: 'left',
                    },
                    {
                        header: proxy.$t('ipo.Timetable.Time'),
                        content: 'persent',
                        width: isMobel() ? 22 : 20,
                        align: 'left',
                    },
                ],
                lists: [
                    {
                        des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
                        number: lists[0].number,
                        persent: lists[0].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
                        number: lists[1].number,
                        persent: lists[1].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
                        number: lists[2].number,
                        persent: lists[2].persent,
                    },
                    {
                        des: proxy.$t(
                            'ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'
                        ),
                        number: lists[3].number,
                        persent: lists[3].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
                        number: lists[4].number,
                        persent: lists[4].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
                        number: lists[5].number,
                        persent: lists[5].persent,
                    },
                ],
            },
        },
    ];
});
const Documents11 = computed(() => {
    return [
        {
            name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
            info: Documents.value[0].info,
            name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
            info2: Documents.value[0].info2,
            href: Documents.value[0].href,
            href2: Documents.value[0].href2,
        },
    ];
});
const Transaction11 = computed(() => {
    const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = MockRes.value;
    const arr = [
        { info: has_data(brokerage?.toFixed(5), '%'), info2: has_data(sfcLevy?.toFixed(5), '%') },
        {
            info: has_data(sehkTradingFee?.toFixed(5), '%'),
            info2: has_data(afrcTransactionLevy?.toFixed(5), '%'),
        },
    ];
    const arrData = Transaction.value.map((item, index) => {
        if (arr[index].info2) {
            return { ...item, info: arr[index].info, info2: arr[index].info2 };
        } else {
            return { ...item, info: arr[index].info };
        }
    });
    return [
        {
            name: proxy.$t('ipo.TransactionCosts.Brokerage'),
            info: arrData[0].info,
            name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
            info2: arrData[0].info2,
        },
        {
            name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
            info: arrData[1].info,
            name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
            info2: arrData[1].info2,
        },
    ];
});
const store = ipoStore();
const { proxy } = getCurrentInstance() as any;
const i0 = ref();
const i1 = ref();
const i2 = ref();
const i3 = ref();
const i4 = ref();
const i5 = ref();
const i6 = ref();
const ipoNav = ref();
const isClickScroll = ref(false);
const data = ref({
    title: '-',
    number: 10000,
    HKD: '-',
    price: '-',
    time: '-',
    trading: '-',
});

const Offerings = ref([
    {
        name: proxy.$t('ipo.Offering.TradingCurrency'),
        info: '-',
    },
    {
        name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
        info: '0%',
    },
    {
        name: proxy.$t('ipo.Offering.OfferPriceRange'),
        info: '-',
        name2: proxy.$t('home.finalofferprice'),
        info2: '-',
    },
    {
        name: proxy.$t('ipo.Offering.TradingBoardLot'),
        info: '-',
    },
    {
        name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
        info: '-',
    },
    {
        name: '',
        info: '',
        name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
        info2: '-',
        table: {
            title: [
                {
                    header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'),
                    content: 'number',
                    width: isMobel() ? 33 : 50,
                    align: 'right',
                },
                {
                    header: proxy.$t('ipo.Offering.PublicOfferAllocation'),
                    content: 'persent',
                    width: isMobel() ? 38 : 50,
                    align: 'right',
                },
            ],
            lists: [
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
            ],
        },
    },
    {
        name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
        info: '-',
        name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
        info2: '-',
    },
    {
        name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
        info: '-',
    },
    {
        name: proxy.$t('ipo.Offering.DenominationTable'),
        table: {
            title: [
                {
                    header: proxy.$t('ipo.Offering.ApplicationQuantity'),
                    content: 'number',
                    width: isMobel() ? 35 : 50,
                    align: 'right',
                },
                {
                    header: proxy.$t('ipo.Offering.MaximumPayableonApplication'),
                    content: 'persent',
                    width: 50,
                    align: 'right',
                },
            ],
            lists: [
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
            ],
        },
    },
]);
const Advisers = ref([
    {
        name: proxy.$t('ipo.advisers.DesignatedSponsor'),
        info: '-',
    },
    {
        name: proxy.$t('ipo.advisers.Sponsor'),
        info: '',
    },
    {
        name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
        infos: ['-'],
    },
    {
        name: proxy.$t('ipo.advisers.HKLegalAdviser'),
        info: '-',
    },
    {
        name: proxy.$t('ipo.advisers.Underwriter'),
        info: '',
    },
    {
        name: proxy.$t('ipo.advisers.Adviser'),
        info: '',
    },
    {
        name: proxy.$t('ipo.advisers.OverallCoordinator'),
        infos: ['-'],
        info2Top: '',
    },
    {
        name: proxy.$t('ipo.advisers.Distributor'),
        infos: ['-'],
        info2Top: '',
    },
    {
        name: proxy.$t('ipo.advisers.HKShareRegistrar'),
        info: '-',
    },
]);
const Timetable = ref([
    {
        name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
        info: '-',
        name2: proxy.$t('ipo.Timetable.Time'),
        info2: '-',
        table: {
            title: [
                { header: ' ', content: 'des', width: isMobel() ? 50 : 43, align: 'left' },
                { width: 12 }, //通过加一段空结构来调整表头的位置
                {
                    header: proxy.$t('ipo.Timetable.Date'),
                    content: 'number',
                    width: isMobel() ? 30 : 20,
                    align: 'left',
                },
                {
                    header: proxy.$t('ipo.Timetable.Time'),
                    content: 'persent',
                    width: isMobel() ? 22 : 20,
                    align: 'left',
                },
            ],
            lists: [
                {
                    des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
                    number: '-',
                    persent: '-',
                },
                {
                    des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
                    number: '-',
                    persent: '-',
                },
                {
                    des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t(
                        'ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'
                    ),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
                    number: '-',
                    persent: '',
                },
            ],
        },
    },
]);
const Documents = ref([
    {
        name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
        info: '-',
        name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
        info2: '-',
        href: '',
        href2: '',
    },
]);
const Transaction = ref([
    {
        name: proxy.$t('ipo.TransactionCosts.Brokerage'),
        info: '-',
        name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
        info2: '-',
    },
    {
        name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
        info: '-',
        name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
        info2: '-',
    },
]);
const content = ref();
onMounted(() => {
    store.setActiveShow(3);
    store.setMobileActiveShow(3); //设置移动端弹窗高亮

    const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
    data.value = obj;

    getreferencedata();
    // setDownLoad();
});

const getreferencedata = async () => {
    const ipoID = sessionStorage.getItem('ipoID');
    if (ipoID != null) {
        const res = await getIpo(ipoID as string);
        MockRes.value = (res as any).data[0];
        const enHref = MockRes.value.pdfLink?.eLink;
        const chinaHref = MockRes.value.pdfLink?.cLink;
        console.log('isDownLoad', enHref, typeof enHref);
        console.log('isDownLoad2', chinaHref);
        Documents.value = [
            {
                name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
                info: enHref && enHref != 'null' ? 'ipo.pdf' : '-',
                name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
                info2: chinaHref && chinaHref != 'null' ? 'ipo.pdf' : '-',
                href: enHref,
                href2: chinaHref,
            },
        ];
    }
};

function isMobel() {
    return 768 >= document.documentElement.clientWidth;
}

//保留两位小数的函数
const keepTwoDecimalStr = (num: number) => {
    if (num) {
        const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
        let s = result.toString();
        let rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s + '%';
    } else {
        return '-';
    }
};
const keepTwoDecimalStr1 = (num: number) => {
    if (num) {
        const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
        let s = result.toString();
        let rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s + '%';
    } else {
        return '0%';
    }
};

function has_data1(str: string | null | undefined, str2: string = '') {
    if (MockRes.value.companyEngFull == MockRes.value.companyChiFull) {
        return '-';
    } else if (str) {
        return str ? str + str2 : '-';
    } else {
        return str ? str : '-';
    }
}
function has_data2(str: string | null | undefined, str2: string = '') {
    if (MockRes.value.companyChiShort == MockRes.value.companyEngShort) {
        return '-';
    } else if (str) {
        return str ? str + str2 : '-';
    } else {
        return str ? str : '-';
    }
}
function has_data(str: string | null | undefined, str2: string = '') {
    if (str) {
        return str ? str + str2 : '-';
    } else {
        return str ? str : '-';
    }
}
//滑动到指定列表
function scrollTo(stron: string) {
    isClickScroll.value = true;
    var obj = {
        i0TOP: i0.value.$el.offsetTop,
        i1TOP: i1.value.$el.offsetTop,
        i2TOP: i2.value.$el.offsetTop,
        i3TOP: i3.value.$el.offsetTop,
        i4TOP: i4.value.$el.offsetTop,
        i5TOP: i5.value.$el.offsetTop,
        i6TOP: i6.value.$el.offsetTop,
    };
    if (isValidKey(stron, obj)) {
        // 滑动
        content.value.scrollTop = obj[stron] - obj.i0TOP;
    }
    setTimeout(() => {
        isClickScroll.value = false;
    });

    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
    function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
        return key in object;
    }
}
function contentScroll(e: any) {
    if (isClickScroll.value) return;
    var obj = {
        i0TOP: i0.value.$el.offsetTop + 50,
        i1TOP: i1.value.$el.offsetTop,
        i2TOP: i2.value.$el.offsetTop,
        i3TOP: i3.value.$el.offsetTop,
        i4TOP: i4.value.$el.offsetTop,
        i5TOP: i5.value.$el.offsetTop,
        i6TOP: i6.value.$el.offsetTop,
    };
    if (obj.i6TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 6;
    } else if (obj.i5TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 5;
    } else if (obj.i4TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 4;
    } else if (obj.i3TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 3;
    } else if (obj.i2TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 2;
    } else if (obj.i1TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 1;
    } else {
        ipoNav.value.ipoNavActive = 0;
    }
}
// async function setDownLoad() {
//     const ipoID = sessionStorage.getItem('ipoID');
//     if (ipoID != null) {
//         console.log('MockRes.value.pdfLink',MockRes.value);
        
//         const enHref = MockRes.value.pdfLink?.eLink;
//         const chinaHref = MockRes.value.pdfLink?.cLink;
//         console.log('isDownLoad', enHref, typeof enHref);
//         console.log('isDownLoad2', chinaHref);
//         Documents.value = [
//             {
//                 name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
//                 info: enHref && enHref != 'null' ? 'ipo.pdf' : '-',
//                 name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
//                 info2: chinaHref && chinaHref != 'null' ? 'ipo.pdf' : '-',
//                 href: enHref,
//                 href2: chinaHref,
//             },
//         ];
//     }
// }
</script>
<style lang="scss" scoped>
.login2 {
    height: 100vh;
    overflow: hidden;
    @media screen and (max-width: 768px) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('@/assets/1x/beijingtu.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

//取消滚动条样式
::-webkit-scrollbar {
    display: none;
}

.wrap {
    display: flex;
    padding-top: 30px;
    height: 100%;
    width: 1400px;
    @media screen and (max-width: 768px) {
        padding-top: 10px;
        width: 100vw;
        overflow: hidden;
    }

    .leftbox {
        width: 22%;
        height: 100%;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    .rightbox {
        padding-top: 30px;
        width: 78%;
        height: 100%;
        padding-left: 20px;

        @media screen and (max-width: 768px) {
            padding-top: 0px;
            padding-left: 0px;
            width: 100vw;
            overflow: hidden;
        }
    }

    .content {
        width: 100%;
        //height: 550px;
        height: 660px;
        margin-top: 11px;
        overflow: scroll;

        @media screen and (max-width: 768px) {
            height: 80vh;
        }
    }

    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
}

:deep(.el-table__header) {
    font-size: 18px;
}

:deep(.el-table td.el-table__cell div) {
    font-size: 18px;
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .login2 {
        width: 100vw;
        height: 130vh;
        .wrap {
            width: calc(100vw / var(--screen) * 1400);
        }
    }
}
</style>
